﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Portal/Master/Portal.Master" AutoEventWireup="true"
    CodeBehind="Index.aspx.cs" Inherits="Besture.UI.Portal.Home.Index" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" href="/Resource/css/index.css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Content" runat="server">
    <div class="main">
        <!-- 右边浮窗 -->
        <div class="layout_right">
            <a href="#" class="a1">
                <img src="../../Resource/images/qq2.png" />
                <p>
                    QQ</p>
                <div class="text2">
                    813145299
                </div>
            </a><a href="#" class="a1">
                <img src="../../Resource/images/tel2.png" />
                <p>
                    电话</p>
                <div class="text3">
                    7758-258
                </div>
            </a><a href="#" class="a2">
                <img class="img" src="../../Resource/images/up.png" />
                <p>
                    TOP</p>
                <p style="height: 10px;">
                </p>
            </a>
        </div>
        <!-- 右边浮窗 -->
        <div class="main_img">
            <div class="main_seach">
                <div class="main_seach_body">
                    <div class="seach_grog">
                        搜索酒店</div>
                    <div class="bourn">
                        请输入酒店名称</div>
                    <input class="input_bourn" />
                    <div class="seach_grog2">
                        <div class="check">
                            入住</div>
                        <input id="dtbegin" class="input_bourn2" readonly="readonly"/>
                    </div>
                    <div class="seach_grog2">
                        <div class="check">
                            退房</div>
                        <input id="dtend" class="input_bourn2" readonly="readonly"/>
                    </div>
                    <div class="notime">
                        <label>
                            <input type="checkbox" />我还是没确定具体的日期。
                        </label>
                    </div>
                    <input type="button" class="subimt" value="搜索" />
                </div>
            </div>
        </div>
        <div class="main_moddle">
            <div class="main_moddle_text">
                <div class="main_moddle_t">
                    <img src="../../Resource/images/grog.png" />
                    <div class="grog">
                        更多的酒店</div>
                    <div class="text">
                        提供超过18,000家的酒店和旅馆，您将可以有更多选择挑到满意的酒店</div>
                </div>
                <div class="main_moddle_t">
                    <img src="../../Resource/images/money.png" />
                    <div class="grog">
                        更多的酒店</div>
                    <div class="text">
                        提供超过18,000家的酒店和旅馆，您将可以有更多选择挑到满意的酒店</div>
                </div>
                <div class="main_moddle_t1">
                    <img src="../../Resource/images/deng.png" />
                    <div class="grog">
                        更多的酒店</div>
                    <div class="text">
                        提供超过18,000家的酒店和旅馆，您将可以有更多选择挑到满意的酒店</div>
                </div>
            </div>
        </div>
        <div class="main_body">
            <div class="main_body_title">
                翔盛的热门酒店</div>
            <div class="main_body_img">
                <div class="main_body_im">
                </div>
            </div>
            <div class="main_body_title">
                推荐的酒店
            </div>
            <div class="hothotel">
            </div>
            <div class="main_body_foolt">
                <div class="main_body_foolt_img">
                </div>
            </div>
            <div class="bnt">
                <a href="/Portal/Hotel/Product.aspx">SEE MORE</a>
            </div>
            <br class="clear" />
        </div>
    </div>

    <script type="text/x-mustache" id="t1">
        {{#items}}
            <div tag="{{ID}}">
                <img alt="" class="myimg" style="width:237px; height:345px;" src="{{HotelsImage}}" />
                <div class="main_body_img_foolt">{{Area}}</div>
                <div class="effect">
                    <div class="etitle">{{HotelsName}}</div>
                    <div class="content">{{Introduction}}</div>
                </div>
            </div>
        {{/items}}
    </script>
    <script type="text/x-mustache" id="t2">
        {{#items}}
            <div tag="{{ID}}">
                <img alt="" style="width:324px; height:344px;" src="{{HotelsImage}}" />
                <div class="effect">
                    <div class="etitle">{{HotelsName}}</div>
                    <div class="content">{{Introduction}}</div>
                </div>
            </div>
        {{/items}}
    </script>
    <script type="text/javascript">
        $(".subimt").click(function () {
            var beginDate = $("#dtbegin").val();
            var endDate = $("#dtend").val();
            var d1 = new Date(beginDate.replace(/\-/g, "\/"));
            var d2 = new Date(endDate.replace(/\-/g, "\/"));
            var dayspan = (d2 - d1) / 24 / 3600 / 1000;
            if (d1 >= d2) {
                alert("退房时间必须大于入住时间！");
                return;
            }
            if (dayspan > 20) {
                alert("时间跨度不能超过20天！");
                return;
            }
            var ck;
            if ($("input:checkbox").is(':checked')) {
                ck = 1;
            } else {
                ck = 0;
            }
            window.location.href = "../Hotel/Product.aspx?hn=" + $(".input_bourn").val() + "&bt=" + $("#dtbegin").val() + "&et=" + $("#dtend").val() + "&ck=" + ck;
        });
        function AddEffect(obj) {
            obj.hover(function () {
                _this = $(this);
                _this.find(".etitle").css("padding-top", _this.height() / 3);
                _this.children(".effect").height(_this.height()).width(_this.width()).show();
                _this.children(".effect").css("cursor", "pointer");
            }, function () {
                _this.children(".effect").hide();
            });
            obj.click(function () {
                if ($(this).attr("tag") != 0) {
                    window.location.href = "../Hotel/ProductDetail.aspx?hotelid=" + $(this).attr("tag") + "&bt=&et=";
                }
            });
        }
        $(document).ready(function () {
            $(".input_bourn2").date_input();
            $.ajax({
                type: "POST",
                url: "Index.aspx/GetHomeHotels",
                contentType: "application/json",
                success: function (msg) {
                    if (msg.d != "") {
                        var dataObj = eval("(" + msg.d + ")");
                        $(".main_body_im").html(Mustache.render($("#t1").html(), dataObj[0]));
                        $(".hothotel").append("<div class='img1' tag='" + dataObj[1].items[0].ID + "'><img alt='' style='width:663px; height:344px;' src='" + dataObj[1].items[0].HotelsImage + "' /><div class='effect'><div class='etitle'>" + dataObj[1].items[0].HotelsName + "</div><div class='content'>" + dataObj[1].items[0].Introduction + "</div></div></div>")
                        $(".hothotel").append("<div class='img2' tag='" + dataObj[2].items[0].ID + "'><img alt='' style='width:324px; height:344px;' src='" + dataObj[2].items[0].HotelsImage + "' /><div class='effect'><div class='etitle'>" + dataObj[2].items[0].HotelsName + "</div><div class='content'>" + dataObj[2].items[0].Introduction + "</div></div></div><br class='clear'/>")
                        $(".main_body_foolt_img").html(Mustache.render($("#t2").html(), dataObj[3]));
                        $(".main_body_img_foolt").each(function (i) {
                            var _this = $(this);
                            var colorarry = new Array("#00d1c1", "#007a87", "#509d37", "#700749");
                            _this.css("background", colorarry[i]);
                        });
                        $(".main_body_im>div").each(function () {
                            AddEffect($(this));
                        });
                        $(".hothotel>div").each(function () {
                            AddEffect($(this));
                        });
                        $(".main_body_foolt_img>div").each(function () {
                            AddEffect($(this));
                        });
                    }
                }
            });
        });
    </script>
</asp:Content>
